<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8" />
        <title>TextBox - ESUI Demo</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
        <link rel="stylesheet" href="assets/themes/standard.css" />
        <!--[if lt IE 9]>
        <link rel="stylesheet" href="assets/ie8.css" />
        <![endif]-->
    </head>
<body>
    <div class="header">
        <h1 id="branding">ESUI - TextBox</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>多种模式</h2>
            <p>文本框有3种模式：文本、密码、多行。</p>
            <div class="example ui-demo-light-stage">
                <h3>文本框</h3>
                <div class="row">
                    <div
                        class="ui-textbox"
                        data-ui-id="text-box-normal"
                        data-ui-type="TextBox">
                        <input />
                    </div>
                </div>
                <h3>密码框</h3>
                <div class="row">
                    <div class="ui-textbox" data-ui-id="text-box-password"
                        data-ui-type="TextBox"> 
                        <input type="password" />
                    </div>
                </div>
                <h3>多行文本框</h3>
                <div class="row">
                    <div class="ui-textbox" data-ui-id="text-box-textarea"
                        data-ui-type="TextBox" data-ui-placeholder="多行">
                        <textarea></textarea>
                    </div>
                </div>
            </div>

            <h2>前后缀提示</h2>
            <p>使用<code>hint</code>和<code>hintType</code>属性灵活定义前后缀式的提示信息。</p>
            <div class="example">
                <h3>前置</h3>
                <div class="row">
                    <input id="text-box-prefix"
                        data-ui-type="TextBox"
                        data-ui-hint="http://"
                        data-ui-hint-type="prefix" />
                </div>
                <h3>后置</h3>
                <div class="row">
                    <input id="text-box-suffix"
                        data-ui-type="TextBox"
                        data-ui-hint="px"
                        data-ui-hint-type="suffix" />
                </div>
            </div>

            <h2>输入提示</h2>
            <p>使用<code>placeholder</code>属性为文本框加上输入提示信息。</p>
            <div class="example">
                <input id="text-box-with-placeholder"
                    placeholder="使用placeholder属性"
                    data-ui-id="text-box-with-placeholder"
                    data-ui-type="TextBox"
                    data-ui-mode="text" />
            </div>

            <h2>输入监听</h2>
            <p>使用<code>input</code>事件监听输入的内容。</p>
            <div class="example">
                <input id="text-box-with-input-listener"
                    placeholder="使用placeholder属性"
                    data-ui-id="text-box-with-input-listener"
                    data-ui-type="TextBox"
                    data-ui-mode="text" />
                <label id="left-length-hint" for="text-box-with-input-listener">还可以输入40个字符</label>
            </div>
            <script type="text/sample" data-refid="main-js">
            </script>

            <h2>状态</h2>
            <p>显示验证信息。</p>
            <div class="example ui-demo-light-stage">
                <h3>出错</h3>
                <div class="row">
                    <div 
                        placeholder="使用placeholder属性"
                        data-ui-id="text-box-with-invalid"
                        data-ui-type="TextBox"
                        data-ui-mode="text">
                        <input />
                    </div>
                </div>
                <h3>不可用</h3>
                <div class="row">
                   <input disabled
                    placeholder="使用placeholder属性"
                    data-ui-id="text-box-with-input-disabled"
                    data-ui-type="TextBox"
                    data-ui-mode="text" />
                </div>
                <h3>只读</h3>
                <div class="row">
                   <input readonly
                    placeholder="使用placeholder属性"
                    data-ui-id="text-box-with-input-readonly"
                    data-ui-type="TextBox"
                    data-ui-mode="text" />
                </div>
                <h3>成功</h3>
                <div class="row">
                   <label></label>
                   <div
                    placeholder="使用placeholder属性"
                    data-ui-id="text-box-with-input-success"
                    data-ui-type="TextBox"
                    data-ui-mode="text"
                    data-ui-states="success">
                   </div>
                </div>
                <h3>警告</h3>
                <div class="row">
                   <div class="ui-textbox-warning"
                    placeholder="使用placeholder属性"
                    data-ui-id="text-box-with-input-warning"
                    data-ui-type="TextBox"
                    data-ui-mode="text"
                    data-ui-states="warning">
                   </div>
                </div>
                <label>焦点</label>
                <div class="row">
                   <div class="ui-textbox-focus"
                    placeholder="使用placeholder属性"
                    data-ui-id="text-box-with-input-focus"
                    data-ui-type="TextBox"
                    data-ui-mode="text"
                    data-ui-states="focus">
                   </div>
                </div>
            </div>

            <h2>图标</h2>
            <p>Textbox图标。</p>
            <div class="example ui-demo-light-stage">
                <h3>前置</h3>
                <div class="row">
                    <div
                        data-ui-placeholder="使用placeholder属性"
                        data-ui-type="TextBox"
                        data-ui-mode="text"
                        data-ui-icon="ui-icon-weibo"
                        data-ui-variants="icon-left"
                        >
                    </div>
                </div>
                <h3>后置</h3>
                <div class="row">
                    <input 
                    data-ui-placeholder="使用placeholder属性"
                    data-ui-type="TextBox"
                    data-ui-mode="text"
                    data-ui-icon="ui-icon-weibo"
                    data-ui-variants="icon-right"
                    />
                </div>
            </div>
        </div>
    </div>
    <script src="assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="demo.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
        require(
            [
                'esui',
                'esui/TextBox',
                'esui/Tab',
                'demo'
            ],
            function (ui) {
                ui.init();
                ui.get('text-box-with-invalid').showValidationMessage('invalid', '不能为空！');

                var maxLength = 40;
                var textbox = ui.get('text-box-with-input-listener');
                var label = document.getElementById('left-length-hint');
                textbox.on(
                    'input',
                    function () {
                        var value = this.getValue();
                        var leftLength = maxLength - value.length;
                        if (leftLength > 0) {
                            label.innerHTML = '还可以输入' + leftLength + '个字符';
                            label.className = '';
                        }
                        else {
                            label.innerHTML = '已经超出了' + (-leftLength) + '个字符';
                            label.className = 'invalid';
                        }
                    }
                );
            }
        );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>
